<template>
  <div>
    <button @click="add">新建联系人</button>
    <!-- 父组件 -->
    <list :list="list" @edit="edit"></list>
    <!-- 弹出即负责添加又负责编辑 -->
    <dialog1
      :type="type"
      v-show="isShow"
      @close="close"
      @add="getData"
      @edit="editInfo"
      ref="dialog1"
    ></dialog1>
  </div>
</template>

<script>
import List from './List.vue'
import Dialog1 from './Dialog.vue'
export default {
  components: {
    List,
    Dialog1
  },
  data() {
    return {
      type: 'add',
      // 弹窗默认隐藏
      isShow: false,
      list: [
        {name: '张三', tel: '18977777777', id: 1},
        {name: '李四', tel: '18966677777', id: 2},
        {name: '王五', tel: '18977887777', id: 3},
        {name: '赵六', tel: '18787777777', id: 4},
      ]
    }
  },
  created() {
    // 路由的参数
    console.log(this.$route.query);
  },
  methods: {
    // 新建联系人，显示弹窗
    add() {
      this.isShow = true;
      // 弹窗类型是新增
      this.type = 'add';
      // 在父组件中通过$ref调用子组件的方法
      // id  根据list的长度自动生成
      this.$refs.dialog1.setValue({name: '', tel: '',id: this.list.length+1});
    },
    // 编辑联系人，显示弹窗
    edit(info) {
      this.isShow = true;
      // 弹窗类型是编辑
      this.type = 'edit';
      // 在父组件中通过$ref调用子组件的方法
      this.$refs.dialog1.setValue(info);
    },
    // 关闭弹窗
    close() {
      this.isShow = false;
    },
    // 从子组件获取联系人数据
    getData(val) {
      // console.log(val);
      // 新增联系人
      this.list.push(val);
    },
    // 编辑联系人
    editInfo(val) {
      this.list.forEach(item => {
        // item是原来的数据，val是修改后的数据
        if(item.id == val.id) {
          item.name = val.name;
          item.tel = val.tel;
        }
      });
    }
  }
}
</script>

<style>

</style>